<template>
  <view class="layout-item">
    <view class="uni-list">
      <view class="uni-list-cell layout-item-conten">
        <view class="uni-list-cell-left layout-label"> 当前选择: </view>
        <view class="uni-list-cell-db layout-text">
          <picker
            @change="bindPickerChange"
            :value="index"
            :range="array"
            class="layout-sel"
          >
            <view class="uni-input layout-last"
              ><view>{{ array[index] }}</view>
              <view
                ><uni-icons
                  type="forward"
                  size="20"
                  color="#69717A"
                ></uni-icons></view
            ></view>
          </picker>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      index: null,
    };
  },
  props: {
    array: {
      type: Array,
      required: true,
    },
  },
  methods: {
    bindPickerChange(e) {
      this.index = Number(e.detail.value);
    },
  },
};
</script>

<style lang="scss" scoped>
.layout-item-conten {
  display: flex;
  padding-left: 30rpx;
  border-bottom: 1px solid rgba(246, 246, 246, 09);
  font-size: 28rpx;
  height: 100rpx;
  background: #fff;
  align-items: center;
  .layout-label {
    color: #2e3540;
    margin-right: 28rpx;
  }
  .layout-text {
    flex: 1;
    color: #32363a;
  }

  .layout-last {
    display: flex;
    justify-content: space-between;

    // height: 100rpx;
    align-items: center;
  }
}
</style>